5.6 jQuery vs. VanillaJS

  1. Motivations
    • There are pros and cons in using jQuery. It is easy to use jQuery, and coding becomes simple and short. But jQuery code is a bit slower than plain JavaScript code.
    • Nowadays computer systems including mobile devices are fast. When we use jQuery for user interfaces and AJAX, we do not see any latency. But when we develop a library/framework or when we use web technologies in less powerful devices, e.g., IoT devices, we should not loose any efficiency in the code.
    • How can we use JavaScript for the works that we can do with jQuery?

  2. VanillaJS
    • VanillaJS is a name to refer to using plain JavaScript without any additional libraries like jQuery.
    • What can we do with jQuery?
      • Selections and actions
      • Registration of event listeners
      • AJAX

    • Selections with plain JavaScript
      • document.getElementById('id')
      • document.getElementsByClassName('class') - It returns an array of DOM objects.
      • document.querySelector("CSS selector, e.g., '.testclass > p'") - It returns the first selected DOM object.; HTML DOM querySelector() Method
      • document.querySelectorAll(CSS selector) - It returns an array of selected DOM objects. HTML DOM querySelectorAll() Method
      • domobject.innerHTML; domobject.attributeproperty
      • domobject.style.cssproperty
      • window.getComputedStyle(domobject).cssproperty
      • domobject.parentElement Why do we need this method?
      • domobject.previousSibling Why do we need this method?
      • ...
      • Vanillna.jsjQuery
        document.getElementById('id')$('#id')
        document.getElementByClassName('class')$('.class')
        document.querySelectorAll(CSS selector)$(CSS selector)
        domobject.innerHTML;
        domobject.attributeproperty        		$(domobject).html([...]);
        $(domobject).attr('attributename'[, ...])
        domobject.style.cssproperty$(domobject).css('csspropertyname'[, ...])
        window.getComputedStyle(domobject).cssproperty$(domobject).css('csspropertyname'[, ...])

    • Registration of event listeners with plain JavaScript
      • domobject.addEventListener(), domobject.removeEventListener()
      • ...
      • Trial 0.5: Let's to register 'click' event listener for all the elements in the class 'test'. You can display the alert popup window with the clicked element's content.
        Vanilla JS should be used.



    • AJAX with plain JavaScript
      • In the previous section, we learned how to use AJAX with plain JavaScript.
      • XMLHttpRequest
      • How to send form data? Read exampls in Sending form data.
        • Building an XMLHttpRequest manually - We studied this in the previous section 5.6.
        • Using XMLHttpRequest and the FormData object
        • Using FormData bounding to a form element - The FormData interface provides a way to easily construct a set of name/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. 
          var formObject = document.getElementById("idform");
formObject.addEventListener("submit", function(eobj) {
    eobj.preventDefault();  // Do not submit the form.
    
    const xhr = new XMLHttpRequest();
    xhr.addEventListener("load", function() {  // XMLHttpRequest events: readystatechange, load, error, ...
        ...  // xhr.responseText
    });
    xhr.open("post", ...);
    xhr.send(new FormData(formObject));
});
        • Trial 1: Let's to send the 'ListQuestions' command to TRUQA controller, using the POST method.


        • Can you write the table code in the client, not the server-side? Then how to send data to the client from the server?

  3. Some review questions and learning outcomes
    • Use of plain JavaScript instead of jQuery